今天也是語法!

屬性綁定

在 Vue 中，mustache 語法 (即雙大括號) 只能用於文本插值。
為了給屬性綁定一個動態值，需要使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

簡寫

<div :id="dynamicId"></div>

指令是由 v- 開頭的一種特殊屬性。它們是 Vue 模板語法的一部分。和文本插值類似，指令的值是可以訪問組件狀態的 JavaScript 表達式。

冒號後面的部分 (:id) 是指令的“參數”。此處，元素的 id attribute 將與組件狀態裡的 dynamicId 屬性保持同步。

實作

把一個動態的 class 綁定添加到h1 上，並使用 titleClass 的 ref 作為它的值。

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

事件監聽

我們可以使用 v-on 指令監聽 DOM 事件：

<button v-on:click="increment">{{ count }}</button>

簡寫

<button @click="increment">{{ count }}</button>

實作

實現 increment 函數並通過使用 v-on 將其綁定到按鈕上。

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <!-- 使此按鈕生效 -->
  <button>Count is: {{ count }}</button>
</template>

完成

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

完成後按按鈕會使count後數字+1